<script setup lang="ts">
interface Props {
  userList: API.UserVO[]
}

const props = withDefaults(defineProps<Props>(), {
  userList: () => []
})
const defaultAvatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'

</script>

<template>
  <div id="UserListCard">
    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 4, xxl: 6 }" :data-source="userList">
      <template #renderItem="{ item: user }">
        <a-list-item>
          <!--          单个用户-->
          <div class="UserCard">
            <!-- 用户头像 -->
            <div class="avatar">
              <a-avatar :size="80" :src="user.userAvatar || defaultAvatar"/>
            </div>
            <!-- 用户姓名 -->
            <div class="username">
              <h4>{{ user.username }}</h4>
              <span class="user-role" v-if="user.userRole === 'admin'">管理员</span>
            </div>
            <!-- 用户标签 -->
            <div class="user-tag">
              <a-tag v-for="tag in user.userTags" :key="tag">{{ tag }}</a-tag>
            </div>
            <!-- 用户简介 -->
            <div class="user-profile">
              {{ user.userProfile }}
            </div>
            <!-- 我能教 -->
            <div class="teach">
              <span class="skill-label">我能教：</span>
              <div class="tag-list">
                <a-tag v-for="tag in user.teach" :key="tag" color="green">{{ tag }}</a-tag>
              </div>
            </div>
            <!-- 我想学 -->
            <div class="learn">
              <span class="skill-label">我想学：</span>
              <div class="tag-list">
                <a-tag v-for="tag in user.learn" :key="tag" color="orange">{{ tag }}</a-tag>
              </div>
            </div>
            <!-- 用户数据 -->
            <div class="user-stats">
              <div class="stat-item">
                <span class="stat-value">{{ user.blogCount || 0 }}</span>
                <span class="stat-label">文章</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ user.followCount || 0 }}</span>
                <span class="stat-label">关注</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ user.fanCount || 0 }}</span>
                <span class="stat-label">粉丝</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ user.points || 0 }}</span>
                <span class="stat-label">积分</span>
              </div>
            </div>

          </div>
        </a-list-item>
      </template>
    </a-list>


  </div>
</template>

<style scoped>
#UserListCard{
  align-items: center;
}
</style>
